<template>
  <div class="map" id="mapBox">
    <div class="top-view">
      <!-- 全景图 -->
      <img v-show="isOut" :src="hosBg" alt="" />

      <!-- 商户楼层图 -->
      <img v-if="!isOut" :src="showImg" alt="" />

      <!-- 商户得分 -->
      <div v-if="!isOut" class="innerMark">{{ roomName }}-商户得分：86分</div>
      <!-- 应急预案 -->
      <div class="backBtn rightBtn" v-if="!isOut">
        <el-button round @click="onEmergency">应急预案</el-button>
      </div>

      <!-- 巡查点 -->
      <div class="inspect" v-for="(item, index) in pointList" :key="index" :style="`top:${item.y}%;left:${item.x}%`">
        <el-tooltip :offset="offsetNum" placement="top-start" popper-class="tooltip-style">
          <!-- <img v-if="item.type!=5" src="../../../assets/images/location.png" alt="" /> -->
          <!-- <img v-if="item.type!=5" src="//wimg.588ku.com/gif620/21/10/06/db8a7214ced2ca872e9eab91470a10c6.gif" alt="" /> -->
          <img
            style="width: 60px; height: 60px"
            v-if="item.type != 5 && !item.status"
            src="@/assets/images/rgif1.gif"
            alt=""
          />
          <img
            style="width: 60px; height: 60px"
            v-else-if="item.type != 5 && item.status"
            src="@/assets/images/bgif.gif"
            alt=""
          />
          <img style="width: 60px; height: 60px" v-else src="@/assets/images/rgif.gif" alt="" />

          <template #content>
            <!-- 消火栓 -->
            <div v-if="item.type == 1">
              <p>{{ item.name }}（消火栓）</p>
              <p>
                1.消火栓规格、数量和设置位置应符合规范要求
                <span @click="showPoint(541)" style="margin-left: 16px; cursor: pointer; color: #67c23a"> 合格</span>
              </p>
              <p>
                2.消火栓不应被遮挡、圈占和填埋
                <span @click="showPoint(541)" style="margin-left: 16px; cursor: pointer; color: #67c23a"> 合格</span>
              </p>
              <p>
                3.消火栓安装应牢固，组件完整，开关灵活，外观质量符合要求<span
                  @click="showPoint(541)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                4.消火栓供水压力从底面算起不应小于0.10MPa<span
                  @click="showPoint(541)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                5.消火栓箱安装应牢固，应有明显标志，箱内组件应齐全，箱门开关灵活<span
                  @click="showPoint(541)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                6.消火栓不应被遮挡、圈占<span
                  @click="showPoint(541)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                7.消火栓栓口的安装位置应能保证水带与栓扣连接方便。安装高度、栓扣垂直墙面向外或向下<span
                  @click="showPoint(538)"
                  style="margin-left: 16px; cursor: pointer; color: #ffa502"
                >
                  不合格</span
                >
              </p>
            </div>
            <!-- 灭火器 -->
            <div v-else-if="item.type == 2">
              <p>{{ item.name }}（灭火器）</p>
              <p>
                1.每个计算单元配置的灭火器配置数量和类型应符合《建筑灭火器配置设计规范》（GB50140）要求<span
                  @click="showPoint(571)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                2.灭火器应设置在位置明显和便于取用的地点，且不得影响安全疏散<span
                  @click="showPoint(571)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                3.对有视线障碍的灭火器设置点，应设置标志其位置的发光标志<span
                  @click="showPoint(571)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                4.灭火器的摆放应稳固，其铭牌应朝外。手提式灭火器宜设置在灭火器箱内或挂钩、托架上，其顶部离底面高度不应大于1.50m；底部离地面高度不宜小于0.08m。灭火器箱不得上锁<span
                  @click="showPoint(571)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                5.灭火器设置在潮湿或强腐蚀性的地点或室外时，应有响应的保护措施<span
                  @click="showPoint(571)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                6.灭火器应在有效期和报废年限内。二氧化碳灭火器重量应与铭牌标志一致<span
                  @click="showPoint(571)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                7.灭火器铭牌或灭火器维修合格证应清晰，无残缺<span
                  @click="showPoint(571)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                8.灭火器筒体应无明显锈蚀和凹凸等损伤，手柄、插销、铅封、压力表等组件应齐全完好，无松动、脱落或损伤<span
                  @click="showPoint(571)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                9.喷射软管应完好，无龟裂；喷嘴无阻塞<span
                  @click="showPoint(571)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                10.压力表指针范围应在绿色范围内<span
                  @click="showPoint(571)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
            </div>
            <!-- 防火门 -->
            <div v-else-if="item.type == 3">
              <p>{{ item.name }}（防火门）</p>
              <p>
                1.组件及标识齐全完好，应启闭灵活、关闭严密<span
                  @click="showPoint(569)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                2.防火门应能自动闭合，双扇防火门应按顺序关闭；关闭后应能从内、外两侧人为开启<span
                  @click="showPoint(569)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                3.电动常开防火门，应在火灾报警后自动关闭并反馈信号<span
                  @click="showPoint(544)"
                  style="margin-left: 16px; cursor: pointer; color: #ffa502"
                >
                  不合格</span
                >
              </p>
              <p>
                4.设置在疏散通道上、并设有出入口控制系统的防火门，应能自动和手动解除出入口控制系统<span
                  @click="showPoint(569)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
            </div>

            <div v-else-if="item.type == 4">
              <p>{{ item.name }}（配电柜）</p>
              <p>
                1.剩余电流数值是否在正常范围内<span
                  @click="showPoint(562)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                2.线路温度是否在正常范围内<span
                  @click="showPoint(562)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                3.接地电阻是否符合要求<span
                  @click="showPoint(562)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                4.钳形电流表测剩余电流低于300mA<span
                  @click="showPoint(562)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                5.钳形电流表测试火线工作电流不能超负荷运行<span
                  @click="showPoint(570)"
                  style="margin-left: 16px; cursor: pointer; color: #ffa502"
                >
                  不合格</span
                >
              </p>
              <p>
                6.红外热成像仪测工作温度未60度<span
                  @click="showPoint(562)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                7.万用表测电笔排查无短路情况，检查接地情况良好<span
                  @click="showPoint(562)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                8.每个端子未超过两根线<span
                  @click="showPoint(562)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
              <p>
                9.使用相位检测仪检查插座，根据指示灯判断插座的火地零接线无错接漏接<span
                  @click="showPoint(562)"
                  style="margin-left: 16px; cursor: pointer; color: #67c23a"
                >
                  合格</span
                >
              </p>
            </div>
            <div v-else-if="item.type == 5">
              <p>{{ item.name }}（物联网设备）</p>
              <p>液压:0.6166Mpa</p>
              <p>液压:616.6Kpa</p>
              <p>信号强度:-63dbm</p>
              <p>电池电压:3614mv</p>
            </div>
          </template>
        </el-tooltip>
      </div>

      <!-- 商户名称 -->
      <div
        class="inspect room"
        v-for="(item, index) in showRoom"
        :key="index"
        :style="`top:${item.y}%;left:${item.x}%`"
      >
        <el-tooltip popper-class="tooltip-style" placement="top-start">
          <!-- <div :style="item.type == 1 ? 'color:#e6a23c' : 'color:#67c23a'">{{ item.name }}</div> -->
          <template #content>
            <!-- 消火栓 -->
            <div class="passRow" v-if="item.type == 2">
              <span>{{ item.name }}</span>
              <p style="color: #67c23a">1.未及时巡查检查</p>
              <p style="color: #67c23a">2.未及时整改巡查检查不合格项</p>
              <p style="color: #67c23a">3.未及时组织消防演练</p>
              <p style="color: #67c23a">4.未及时组织消防培训</p>
              <p style="color: #67c23a">5.高层民用建筑未及时完成消防安全评估</p>
              <p style="color: #67c23a">6.巡查待审核</p>
              <p style="color: #67c23a">7.三关一闭</p>
              <p style="color: #67c23a">8.未学习</p>
              <p style="color: #67c23a">9.动火动电</p>
              <p style="color: #67c23a">10.公众举报</p>
              <p style="color: #67c23a">11.网格员巡查</p>
              <p style="color: #67c23a">12.烟道清洗</p>
            </div>
            <div class="passRow" v-else>
              <span>{{ item.name }}</span>
              <p style="color: #ffa502">1.未及时巡查检查</p>
              <p style="color: #67c23a">2.未及时整改巡查检查不合格项</p>
              <p style="color: #ffa502">3.未及时组织消防演练</p>
              <p style="color: #67c23a">4.未及时组织消防培训</p>
              <p style="color: #ffa502">5.高层民用建筑未及时完成消防安全评估</p>
              <p style="color: #67c23a">6.巡查待审核</p>
              <p style="color: #67c23a">7.三关一闭</p>
              <p style="color: #67c23a">8.未学习</p>
              <p style="color: #67c23a">9.动火动电</p>
              <p style="color: #67c23a">10.公众举报</p>
              <p style="color: #67c23a">11.网格员巡查</p>
              <p style="color: #67c23a">12.烟道清洗</p>
            </div>
          </template>
        </el-tooltip>
      </div>

      <!-- 楼层切换列表 -->
      <div class="floor-box" v-if="!isOut">
        <!-- <div class="floor-nav"><i class="el-icon-caret-top" /></div> -->
        <div class="floor-list-box">
          <div
            v-for="(item, index) in innerList"
            @click="changeInner(item)"
            :class="item.index === innerIndex ? 'selectedInner' : ''"
            :key="index"
          >
            {{ item.index }}
          </div>
        </div>
        <!-- <div class="floor-nav"><i class="el-icon-caret-bottom"></i></div> -->
      </div>

      <div class="open" @click="openMaplist" ref="open" v-show="isOut">
        <img src="../../../assets/images/magnify.png" />
      </div>

      <div class="backBtn" v-if="!isOut">
        <el-button v-if="!isfull" round @click="onBack">返回</el-button>
        <el-button
          v-if="!isfull"
          style="margin-left: 0; marcursor: pointer; gin-top: 8px"
          round
          @click="onFullscreen(1)"
          >全屏</el-button
        >
        <el-button v-else style="margin-left: 0; marcursor: pointer; gin-top: 8px" round @click="onFullscreen(0)"
          >退出全屏</el-button
        >
      </div>
      <!-- 商户列表 -->
      <div class="zhe df" ref="zhe" v-show="isOut">
        <ul class="map-box" ref="mapBox">
          <el-select v-model="roomName" @change="onClickView" filterable placeholder="楼层地图">
            <el-option v-for="(item, index) in officeList" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <!-- <li
            class="map-list"
            v-for="(item, index) in officeList"
            :key="index"
            @click="onClickView(item)"
          >
            <i class="iconfont icon-huojingzhan1" style="color: #6eecee"></i>
            {{ item.name }}
          </li> -->

          <!-- <li class="map-list">
          <i class="iconfont icon-huojingzhan1" style="color: #6eecee"></i>
          队站
        </li>
        <li class="map-list">
          <i class="iconfont icon-wuxiandianbo" style="color: #6eecee"></i>
          物联网设备
        </li>
        <li class="map-list">
          <i class="iconfont icon-xiaofangshuan" style="color: #6eecee"></i>消火栓
        </li>
        <li class="map-list" @click="setMark">
          <i class="iconfont icon-weixingxiaofangzhan" style="color: #6eecee"></i>微型消防站
        </li>
        <li class="map-list">
          <i class="iconfont icon-jiankong3" style="color: #6eecee"></i>疏散通道监控
        </li>
        <li class="map-list">
          <i class="iconfont icon-jiankong3" style="color: #6eecee"></i>消防控制室监控
        </li>
        <li class="map-list" @click="getLocation()">
          <i class="iconfont icon-position" style="color: #6eecee"></i>我的位置
        </li>
        <li class="map-list">
          <i class="iconfont icon-a-3yewufuwuzhongxin" style="color: #6eecee"></i>街道服务中心
        </li>
        <li class="map-list">
          <i class="iconfont icon-yingjiyuan" style="color: #6eecee"></i>火灾应急预案
        </li>
        <li class="map-list">
          <i class="iconfont icon-quanjingtu" style="color: #6eecee"></i>vr全景
        </li>
        <li class="map-list">
          <i class="iconfont icon-quanjingtu" style="color: #6eecee"></i>充电桩
        </li> -->
        </ul>
        <!-- <div class="close" @click="closeMaplist" ref="close">
          <img src="../../../assets/images/map-close.png" />
        </div> -->
      </div>
    </div>
    <!-- <div id="gdMap">


    </div> -->
    <el-dialog title="应急预案" v-model="dialogVisible" width="30%">
      <span>应急预案</span>
      <div>
        <img v-if="floor == 'L1'" src="@/assets/floor/1f.png" alt="" />
        <img v-else-if="floor == 'L2'" src="@/assets/floor/2f.png" alt="" />
        <img v-else-if="floor == 'L3'" src="@/assets/floor/3f.png" alt="" />
        <img v-else-if="floor == 'L4'" src="@/assets/floor/4f.png" alt="" />
        <img v-else-if="floor == 'L5'" src="@/assets/floor/5f.png" alt="" />
        <img v-else-if="floor == 'L6'" src="@/assets/floor/6f.png" alt="" />
        <img v-else-if="floor == 'L7'" src="@/assets/floor/7f.png" alt="" />
        <img v-else-if="floor == 'L8'" src="@/assets/floor/8f.png" alt="" />
        <img v-else-if="floor == 'B1'" src="@/assets/floor/b1.png" alt="" />
        <img v-else-if="floor == 'B2'" src="@/assets/floor/b2.png" alt="" />
        <img v-else-if="floor == 'B3'" src="@/assets/floor/b3.png" alt="" />
        <img v-else-if="floor == 'B4'" src="@/assets/floor/b4.png" alt="" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 巡查点弹窗 -->
    <el-dialog v-model="pointLogDialog" @close="onClose" width="70%" destroy-on-close>
      <pointLogList :point_id="pointId"></pointLogList>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import B2 from '@/assets/images/B1.jpg'
import L1 from '@/assets/images/L1.jpg'
import L2 from '@/assets/images/L2.jpg'
import L3 from '@/assets/images/L3.jpg'
import L4 from '@/assets/images/L4.jpg'
import L5 from '@/assets/images/L5.jpg'
import L6 from '@/assets/images/L6.jpg'
import L7 from '@/assets/images/L7.jpg'
import L8 from '@/assets/images/L8.jpg'
import B1 from '@/assets/images/LG.jpg'
import hosBg from '@/assets/images/hos-bg.png'
import pointLogList from '@/views/sociolUnitMange/pointLogList.vue'
import { ref, reactive, toRaw, shallowReactive } from 'vue'
const ImgList = shallowReactive({
  B2,
  L1,
  L2,
  L3,
  L4,
  L5,
  L6,
  L7,
  L8,
  B1
})
const dialogVisible = ref(false)

const isOut = ref(true)
const officeList = reactive([
  { label: '万象城B2', value: 'B2' },
  { label: '万象城B1', value: 'B1' },
  { label: '万象城L1', value: 'L1' },
  { label: '万象城L2', value: 'L2' },
  { label: '万象城L3', value: 'L3' },
  { label: '万象城L4', value: 'L4' },
  { label: '万象城L5', value: 'L5' },
  { label: '万象城L6', value: 'L6' },
  { label: '万象城L7', value: 'L7' },
  { label: '万象城L8', value: 'L8' }
])
const innerList = reactive([
  {
    src: B2,
    index: 'B2',
    list: [
      // 消火栓
      {
        x: 32,
        y: 56,
        name: '巡查点-1',
        type: 1,
        status: 0
      },
      {
        x: 55,
        y: 50,
        name: '巡查点-5',
        type: 1,
        status: 0
      },
      //  防火门
      {
        x: 32,
        y: 62,
        name: '巡查点-3',
        type: 3,
        status: 0
      },
      // 灭火器
      {
        x: 36,
        y: 60,
        name: '巡查点-2',
        type: 2,
        status: 1
      },
      {
        x: 55,
        y: 54,
        name: '巡查点-6',
        type: 2,
        status: 1
      },
      // 开关箱
      {
        x: 25,
        y: 58,
        name: '巡查点-4',
        type: 4,
        status: 0
      },
      {
        x: 15,
        y: 54,
        name: '巡查点-7',
        type: 4,
        status: 0
      },
      {
        x: 30,
        y: 39,
        name: '物联网设备-1',
        type: 5
      }
    ]
  },
  {
    src: B1,
    index: 'B1',
    list: [
      // 消火栓
      {
        x: 32,
        y: 56,
        name: '巡查点-1',
        type: 1
      },
      {
        x: 55,
        y: 50,
        name: '巡查点-5',
        type: 1
      },
      //  防火门
      {
        x: 32,
        y: 62,
        name: '巡查点-3',
        type: 3
      },
      // 灭火器
      {
        x: 36,
        y: 60,
        name: '巡查点-2',
        type: 2,
        status: 1
      },
      {
        x: 55,
        y: 54,
        name: '巡查点-6',
        type: 2,
        status: 1
      },
      // 开关箱
      {
        x: 25,
        y: 58,
        name: '巡查点-4',
        type: 4
      },
      {
        x: 15,
        y: 54,
        name: '巡查点-7',
        type: 4
      },
      {
        x: 30,
        y: 39,
        name: '物联网设备-1',
        type: 5
      }
    ]
  },
  {
    src: L1,
    index: 'L1',
    list: [
      {
        x: 30,
        y: 40,
        name: '巡查点-1，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 40,
        y: 20,
        name: '巡查点-2，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 60,
        y: 50,
        name: '物联网设备-1',
        type: 2,
        status: 1
      },
      {
        x: 50,
        y: 70,
        name: '物联网设备-2',
        type: 2,
        status: 1
      }
    ]
  },
  {
    src: L2,
    index: 'L2',
    list: [
      {
        x: 20,
        y: 60,
        name: '巡查点-1，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 50,
        y: 40,
        name: '巡查点-2，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 10,
        y: 50,
        name: '物联网设备-1',
        type: 2,
        status: 1
      },
      {
        x: 60,
        y: 30,
        name: '物联网设备-2',
        type: 2,
        status: 1
      }
    ]
  },
  {
    src: L3,
    index: 'L3',
    list: [
      {
        x: 20,
        y: 60,
        name: '巡查点-1，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 50,
        y: 40,
        name: '巡查点-2，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 10,
        y: 50,
        name: '物联网设备-1',
        type: 2,
        status: 1
      },
      {
        x: 60,
        y: 30,
        name: '物联网设备-2',
        type: 2,
        status: 1
      }
    ]
  },
  {
    src: L4,
    index: 'L4',
    list: [
      {
        x: 20,
        y: 60,
        name: '巡查点-1，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 50,
        y: 40,
        name: '巡查点-2，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 10,
        y: 50,
        name: '物联网设备-1',
        type: 2,
        status: 1
      },
      {
        x: 60,
        y: 30,
        name: '物联网设备-2',
        type: 2,
        status: 1
      }
    ]
  },
  {
    src: L5,
    index: 'L5',
    list: [
      {
        x: 20,
        y: 60,
        name: '巡查点-1，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 50,
        y: 40,
        name: '巡查点-2，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 10,
        y: 50,
        name: '物联网设备-1',
        type: 2,
        status: 1
      },
      {
        x: 60,
        y: 30,
        name: '物联网设备-2',
        type: 2,
        status: 1
      }
    ]
  },
  {
    src: L6,
    index: 'L6',
    list: [
      {
        x: 20,
        y: 60,
        name: '巡查点-1，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 50,
        y: 40,
        name: '巡查点-2，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 10,
        y: 50,
        name: '物联网设备-1',
        type: 2,
        status: 1
      },
      {
        x: 60,
        y: 30,
        name: '物联网设备-2',
        type: 2,
        status: 1
      }
    ]
  },
  {
    src: L7,
    index: 'L7',
    list: [
      {
        x: 20,
        y: 60,
        name: '巡查点-1，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 50,
        y: 40,
        name: '巡查点-2，类型：XX',
        type: 1,
        status: 0
      },
      {
        x: 10,
        y: 50,
        name: '物联网设备-1',
        type: 2,
        status: 1
      },
      {
        x: 60,
        y: 30,
        name: '物联网设备-2',
        type: 2,
        status: 1
      }
    ]
  },
  {
    src: L8,
    index: 'L8',
    list: [
      {
        x: 15,
        y: 38,
        name: '巡查点-1',
        type: 2,
        status: 1
      },
      {
        x: 38,
        y: 48,
        name: '巡查点-1',
        type: 2,
        status: 1
      },
      {
        x: 60,
        y: 47,
        name: '巡查点-2',
        type: 2,
        status: 1
      },
      {
        x: 65,
        y: 50,
        name: '巡查点-3',
        type: 3,
        status: 0
      },
      {
        x: 33,
        y: 48,
        name: '巡查点-4',
        type: 3,
        status: 0
      },
      {
        x: 20,
        y: 38,
        name: '巡查点-4',
        type: 3,
        status: 0
      },
      {
        x: 28,
        y: 55,
        name: '巡查点-5',
        type: 4,
        status: 0
      },
      {
        x: 70,
        y: 50,
        name: '巡查点-5',
        type: 4,
        status: 0
      },
      {
        x: 43,
        y: 50,
        name: '巡查点-6',
        type: 4,
        status: 0
      },
      {
        x: 23,
        y: 38,
        name: '巡查点-7',
        type: 4,
        status: 0
      }
    ]
  }
])

const roomList = reactive([
  {
    x: 44,
    y: 17,
    name: '护理科',
    type: 1
  },
  {
    x: 50,
    y: 67,
    name: '消化科',
    type: 2
  },
  {
    x: 82,
    y: 26,
    name: '心血管内科',
    type: 2
  }
])
let showRoom = ref([])

const innerIndex = ref('B1')
const showImg = ref(null)

let pointList = reactive([])
const roomName = ref(null)

const close = ref()
const open = ref()
const zhe = ref()

const isfull = ref(false)

const pointLogDialog = ref(false) //控制巡查点弹窗开关
const pointId = ref('')

const offsetNum = ref(0)

// 点击巡查点内容打开弹窗
const showPoint = (num) => {
  offsetNum.value = 10000
  pointLogDialog.value = true
  pointId.value = num
}

const onClose = () => {
  pointLogDialog.value = false
  offsetNum.value = 0
}

let floor = ref('');

//点击选中商户
const onClickView = (val) => {
  isOut.value = false
  innerIndex.value = val
  showImg.value = ImgList[val]
  const item = innerList.find((item) => item.index === val)
  pointList = item.list
  showRoom.value = roomList
  floor.value = val;
}
//切换楼层
const changeInner = (item) => {
  // let data =toRaw(item)
  console.log(item, 'ss')
  floor.value = item.index;
  if (item.index == 'B1') {
    showRoom.value = roomList
  } else {
    showRoom.value = []
  }
  console.log(showRoom, 'aa')
  innerIndex.value = item.index
  showImg.value = item.src
  pointList = item.list
  console.log(pointList, '32323')
  // showRoom.value=roomList
}
// 返回
const onBack = () => {
  roomName.value = ref(null)

  isOut.value = true
  pointList = []
  showRoom.value = []
}
// 放大全屏
const onFullscreen = (i) => {
  let mapdom = document.getElementById('mapBox')
  if (i) {
    mapdom.style.position = 'fixed'
    mapdom.style.top = '0'
    mapdom.style.left = '0'
    mapdom.style.height = '100%'
    isfull.value = true
  } else {
    mapdom.style.position = 'relative'
    mapdom.style.top = '0'
    mapdom.style.left = '0'
    mapdom.style.height = '60%'
    isfull.value = false
  }
}

const onEmergency = () => {
  dialogVisible.value = true
}
const closeMaplist = () => {
  zhe.value.style.display = 'none'
  open.value.style.display = 'block'
}
const openMaplist = () => {
  zhe.value.style.display = 'block'
  open.value.style.display = 'none'
}
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
  color: #fff;
  padding-top: 4px;
  position: relative;
  z-index: 9;

  .inspect {
    width: 20px;
    height: 24px;
    margin-top: -12px;
    margin-left: -12px;
    position: absolute;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .room {
    width: auto;
    font-size: 12px;
  }

  .dv-border-box-8 {
    height: 100%;
  }

  .backBtn {
    width: 100px;
    height: 40px;
    position: absolute;
    top: 10px;
    left: 0;
  }

  .rightBtn {
    width: 100px;
    height: 40px;
    position: absolute;
    left: auto;
    top: 10px;
    right: 0;
  }

  #gdMap {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }

  .top-view {
    width: 100%;
    height: 100%;
  }

  .floor-box {
    width: 40px;
    height: 340px;
    padding: 10px 0;
    position: absolute;
    top: 50%;
    right: 10px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    margin-top: -120px;

    .floor-nav {
      height: 32px;
      width: 32px;
      margin: 0 auto;
      border-radius: 16px;
      position: relative;
      text-align: center;
      line-height: 32px;

      i {
        color: red;
        font-size: 14px;
      }
    }

    .floor-list-box {
      width: 40px;
      padding: 0 4px;

      div {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        line-height: 32px;
        text-align: center;
        font-size: 12px;
        color: #000;
        cursor: pointer;
      }

      .selectedInner {
        color: #fff;
        background-color: #4196ff;
      }
    }
  }

  .innerMark {
    width: auto;
    height: auto;
    padding: 4px 20px;
    position: absolute;
    top: 6px;
    left: 42%;
    color: #fff;
    background: url('../../../assets/images/top-txt.png') no-repeat;
    background-size: 98% 100%;
  }
}

.zhe {
  width: 20%;
  // height: 150px;
  overflow-y: scroll;
  // background-color: rgba(94, 104, 123, 0.8);
  position: absolute;
  top: 20px;
  left: 10px;

  .map-box {
    position: relative;

    .close {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #fff;
  font-size: 14px;
}

.map-list {
  padding: 10px 0;

  /* text-align: center; */
  cursor: pointer;
  padding-left: 10px;

  &:hover {
    background-color: #5e687b;
  }
}

.iconfont {
  padding-right: 5px;
  font-size: 16px;
}

.close {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 5px;
  top: 5px;
}

.open {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 20px;
  display: none;
}

img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

:deep(.amap-marker-content) {
  white-space: nowrap !important;
  height: 0 !important;
}

.custom-content-marker {
  position: absolute;
  width: 260px;
  height: 40px;
  border: 1px solid blue;
  border-radius: 2px;
  bottom: 100%;
  transform: translate(-50%);
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;

  .left {
    width: 16%;
    background: #008f4d;
    color: #fff;
    text-align: center;

    .status {
      // background: url('../../assets/leftnav/zj.png') no-repeat center;
      background-size: 43% 80%;
      height: 50%;
      width: 100%;
      font-size: 12px;
      margin-top: 2px;
    }

    .type {
      width: 100%;
      font-size: 12px;
    }
  }
}

.back_img {
  width: 24px;
  height: 28px;
  background: url('../../../assets/images/location.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  transform: translate(-20%, 15%);
  z-index: 100;
}

:deep(.right) {
  width: 84%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 40px;
  white-space: nowrap;
  background: #fff;

  .project_context {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 40px;
    white-space: nowrap;
    padding-left: 6px;
    color: #008f4d;
  }
}

:deep(.custom-input-card) {
  color: #111;
  width: 18rem;
}

:deep(.custom-input-card .btn:last-child) {
  margin-left: 1rem;
  color: #111;
}

:deep(.content-window-card) {
  position: relative;
  width: 23rem;
  padding-left: 1.55rem;
  box-shadow: none;
  bottom: 0;
  left: 0;
  color: #111;
}

:deep(.content-window-card) p {
  text-align: center;
  height: 2rem;
  color: #111;
  margin-top: 0;
  margin-left: 10px;
  margin-bottom: 0;
}

:deep(.tooltip-style) {
  background-color: rgba(0, 0, 0, 0.3) !important;
  color: #fff;
}
</style>
